<template>
  <a-layout class="scroll-hide" style="height:100%;">
    <page-sider :menu="windowMenu(type)" :lang="lang" :collapsed="collapsed" />
    <a-layout-content class="page-content beauty-scroll" :style="{'marginLeft':collapsed?'80px':'200px'}">
      <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
        <router-view ref="page" />
      </page-toggle-transition>
    </a-layout-content>
  </a-layout>
  
</template>

<script>
import PageSider from '@/layouts/side/PageSider'
import PageToggleTransition from '@/components/transition/PageToggleTransition';
import {mapState,mapGetters} from 'vuex'
import { windowCtrl } from '@/mixins/windowCtrl'

export default {
  name: 'PageView',
  mixins:[windowCtrl],
  data () {
    return {
      page: {},
      collapsed:false,
      type: ''
    }
  },

  components: {PageSider, PageToggleTransition},
  computed: {
    ...mapState('setting', ['animate','lang']),
    ...mapGetters('setting', ['windowMenu']),
  },
  created () {
    this.type = this.$route.path.split('/')[2]
  },
  mounted () {
    this.page = this.$refs.page
    window.onresize = ()=>{
      let value = window.innerWidth<840
      if(this.collapsed!=value) this.collapsed=value
    }
  },
  updated () {
    this.page = this.$refs.page
  },
}
</script>

<style lang="less">
  .page-content{
    padding: 12px;
    background-color: @layout-bg-color;
    overflow-y: scroll;
  }
</style>
